<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.plusReady(function () {
            plus.navigator.setStatusBarBackground("#555555");
            plus.navigator.setStatusBarStyle("light")
        })
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav title">
    <h1 class="mui-title title-color"><b id="appTitle">微 信</b></h1>
</header>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" tabindex="0">
        <span class="mui-icon mui-icon-chat"></span>
        <span class="mui-tab-label">微信</span>
    </a>
    <a class="mui-tab-item" tabindex="1">
        <span class="mui-icon mui-icon-personadd"></span>
        <span class="mui-tab-label">通讯录</span>
    </a>
    <a class="mui-tab-item" tabindex="2">
        <span class="mui-icon mui-icon-paperplane"></span>
        <span class="mui-tab-label">发现</span>
    </a>
    <a class="mui-tab-item" tabindex="3">
        <span class="mui-icon mui-icon-person"></span>
        <span class="mui-tab-label">我</span>
    </a>
</nav>
<script type="text/javascript">
    var messageArray = [
        {
            pageId: "chart-List.html",
            pageUrl: "chart-List.html"
        },
        {
            pageId: "chart-Contacts.html",
            pageUrl: "chart-Contacts.html"
        },
        {
            pageId: "chart-Discover.html",
            pageUrl: "chart-Discover.html"
        },
        {
            pageId: "chart-Me.html",
            pageUrl: "chart-Me.html"
        }
    ];

    var messageStyle = {
        top: "44px",
        bottom: "50px"
    }

    mui.plusReady(function () {

        //对网络连接进行监听 如果网络断开修改标题
        netChangeSwitch();

        //禁止返回到登录注册页面
        mui.back = function () {
            return false;
        }
        //获取当前的WebView对象
        var indexWebView = plus.webview.currentWebview();
        //向当前的主页WebView 追加子页4个WebView对象
        for (var i = 0; i < messageArray.length; i++) {
            var messagePage = plus.webview.create(messageArray[i].pageUrl, messageArray[i].pageId, messageStyle);
            //隐藏webview窗口
            messagePage.hide();
            //追加子页面到当前主页面
            indexWebView.append(messagePage);
        }
        //默认展示
        plus.webview.show(messageArray[0].pageId);

        //批量绑定tap事件 展示不同的页面
        mui(".mui-bar-tab").on("tap", "a", function () {
            //获取被点击tab的tabindex值
            var tabindex = this.getAttribute("tabindex");

            //循环关闭剩余窗口
            for (var i = 0; i < messageArray.length; i++) {
                if (i != tabindex) {
                    //隐藏不需要的页面
                    plus.webview.hide(messageArray[i].pageId, "fade-out", 200)
                }
            }

            //显示被点击的tab选项所对应的页面
            plus.webview.show(messageArray[tabindex].pageId, "fade-in", 200)

        })

    });

    //监听网络状态更改
    function netChangeSwitch() {
        document.addEventListener("netchange",function () {
            var networkinfo = plus.networkinfo.getCurrentType();
            var appTitle = document.getElementById("appTitle");
            if (networkinfo==0||networkinfo==1){
                appTitle.innerText="微 信 (未连接)";
            } else{
                appTitle.innerText="微 信";
            }
        })
    }

</script>
</body>
</html>